<template>
	<view class="coupon-box w100 flex-row-center" @click="()=>couponShow=true">
		<text class="title">优惠券</text>
		<view class="sign-left flex-row-center">
			<template v-if="couponList.list.length>0">
				<text class="price" v-if="chooseCouponInfo.id&&chooseCouponInfo.id!=0">{{chooseCouponInfo.name}}</text>
				<text class="name" v-else>选择可使用优惠券</text>
			</template>
			<text class="name" v-else>暂无可使用优惠券</text>
			<up-icon name="arrow-right" color="#A5A6A7" size="28rpx"></up-icon>
		</view>
	</view>
	<up-popup :show="couponShow" @close="closeCoupon" round="18rpx" closeable mode="bottom">
		<view class="choose-sign flex w100">
			<text class="title">选择使用优惠券</text>
			<template v-if="couponList.list.length>0">
				<view class="choose-content W100">
					<scroll-view scroll-y="true" style="height: 100%;width: 100%;" @scrolltolower="getMoreCoupon">
						<view class="couponItem-box flex-row-center" v-for="(item,index) in couponList.list"
							:key="item.id">
							<view class="personnel-left">
								<view class="radio-box-active flex-center" v-if="item.id==chooseCouponInfo.id">
									<up-icon name="checkbox-mark" color="#0A534F" size="28rpx"></up-icon>
								</view>
								<view class="radio-box" v-else></view>
							</view>
							<view class="couponItem-list">
								<couponItemVue @changeCoupon="changeCoupon" type='use' :useCost="useCost"
									:couponInfo="item">
								</couponItemVue>
							</view>

						</view>
						<view class="view-more" @click="getMoreCoupon">
							<up-loadmore :status="couponList.status" />
						</view>
					</scroll-view>
				</view>
			</template>
			<view class="not-list-view" v-else>
				<text class="text">暂无可使用优惠券~</text>
			</view>
		</view>
	</up-popup>
</template>

<script setup>
	import couponItemVue from '@/components/coupon/couponItem.vue';
	const props = defineProps({
		detail: {
			default: 0 //1=组队,2=赛事,3=充值,4=陪玩
		},
		useCost: {
			default: 9999 //当前使用得价钱
		},
	})
	const emit = defineEmits(['changeCouponItem'])
	const couponShow = ref(false);
	const useCost = ref(computed(() => props.useCost))
	const couponStatus = ref(computed(() => props.detail))

	const chooseCouponInfo = reactive({
		id: '',
		name: ''
	});
	const couponList = reactive({
		list: [],
		page: 1,
		status: 'loadmore'
	});
	onMounted(() => {
		getCouponList()
	})
	const getCouponList = async () => {
		const res = await $Api.coupon.getUserCouponList({
			page: couponList.page,
			detail: props.detail,
			status: 0
		})
		if (res.code == 1) {
			if (res.data.list && res.data.list.length > 0) {
				chooseCouponInfo.name = '选择使用优惠券'
				let arr = []
				arr = res.data.list.map(val => {
					if (val.rate) {
						val.rate = (val.rate / 10).toFixed(2)
					}
					return {
						...val
					}
				})
				couponList.list = [...couponList.list, ...arr]
			}
			if (res.data.totalPage > couponList.page) {
				couponList.status = 'loadmore';
				couponList.page++

			} else {
				couponList.status = 'nomore'
			}
		} else {
			uni.$u.toast(res.msg)
		}
	}
	const closeCoupon = () => {
		couponShow.value = false;
	}
	const changeCoupon = (item) => {
		if (chooseCouponInfo.id == item.id) {
			chooseCouponInfo.id = 0;
			chooseCouponInfo.name = '';
			uni.$u.toast('取消使用优惠券')
		} else {
			chooseCouponInfo.id = item.id
			chooseCouponInfo.name = item.title;
		}
		emit('changeCouponItem', chooseCouponInfo.id)
		couponShow.value = false;
	}
	const getMoreCoupon = () => {
		if (couponList.status === 'loading' || couponList.status === 'nomore') return
		couponList.status = 'loading'
		setTimeout(() => {
			getCouponList()
		}, 300)
	}
</script>

<style lang="scss" scoped>
	.coupon-box {
		justify-content: space-between;
		margin-top: 32rpx;

		.title {
			font-size: 32rpx;
			font-weight: bold;
			color: $name-color;
		}

		.sign-left {
			.name {
				color: $description-color;
				font-size: 28rpx;
				margin-right: 12rpx;
			}

			.price {
				color: $price-color;
				font-size: 28rpx;
				margin-right: 12rpx;
			}
		}
	}

	.couponItem-box {
		padding: 24rpx;
		margin-bottom: 24rpx;

		.couponItem-list {
			flex: 1;
		}
	}

	.choose-sign {
		width: 750rpx;
		padding: 36rpx 0;
		height: 60vh;
		flex-direction: column;
		flex-direction: column;
		background-color: $page-bg-color;
		border-radius: 18rpx 18rpx 0 0;
		box-sizing: border-box;

		.title {
			font-weight: bold;
			font-size: 34rpx;
			color: rgba(255, 255, 255, 0.87);
			line-height: 40rpx;
			margin-left: 24rpx;
		}

		.choose-content {
			flex: 1;
			margin: 24rpx 0;
			overflow: hidden;

			.sign-item {
				padding: 20rpx 0;

				&:not(:last-child) {
					border-bottom: 1rpx solid #373B3E;
				}
			}
		}

		.radio-box {
			width: 36rpx;
			height: 36rpx;
			border-radius: 50%;
			border: 1rpx solid #ccc;
			margin-right: 18rpx;
			box-sizing: border-box;
		}

		.radio-box-active {
			width: 36rpx;
			height: 36rpx;
			border-radius: 50%;
			background-color: #7EDE9E;
			margin-right: 18rpx;
		}
	}
</style>